﻿<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Animation</title>

  <style>
    body {
      font-family: Verdana;
      font-size: small;
    }

    canvas {
      cursor: pointer;
      border: 1px solid black;
    }

    div {
      margin: 15px 0px;
    }

    button {
      padding: 4px 10px;
    }

    input[type=number] {
      width: 50px;
      margin-right: 15px;
    }
  </style>

  <script>
    function Ball(x, y, dx, dy, radius) {
        this.x = x;
        this.y = y;
        this.dx = dx;
        this.dy = dy;
        this.radius = radius;
        this.strokeColor = "black";
        this.fillColor = "red";
    }

    var balls = [];

    var canvas;
    var context;

    window.onload = function () {
        canvas = document.getElementById("canvas");
        context = canvas.getContext("2d");

        canvas.onmousedown = canvasClick;

        setTimeout(drawFrame, 20);
    }

    function addBall() {
        var radius = parseFloat(document.getElementById("ballSize").value);

        var ball = new Ball(50, 50, 1, 1, radius);

        balls.push(ball);
    }

    function clearBalls() {
        balls = [];
    }

    function drawFrame() {
        context.clearRect(0, 0, canvas.width, canvas.height);

        context.beginPath();
        for (var i = 0; i < balls.length; i++) {
            var ball = balls[i];
            ball.x += ball.dx;
            ball.y += ball.dy;

            if ((ball.y) < canvas.height) ball.dy += 0.22;

            ball.dx = ball.dx * 0.998;

            if ((ball.x + ball.radius > canvas.width) || (ball.x - ball.radius < 0)) {
                ball.dx = -ball.dx;
            }

            if ((ball.y + ball.radius > canvas.height) || (ball.y - ball.radius < 0)) {
                ball.dy = -ball.dy * 0.96;
            }

            if (!document.getElementById("connectedBalls").checked) {
                context.beginPath();
                context.fillStyle = ball.fillColor;
            } else {
                context.fillStyle = "white";
            }

            context.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2);
            context.lineWidth = 1;
            context.fill();
            context.stroke();
        }

        setTimeout(drawFrame, 20);
    }

    function canvasClick(e) {
        var clickX = e.pageX - canvas.offsetLeft;
        var clickY = e.pageY - canvas.offsetTop;

        for (var i in balls) {
            var ball = balls[i];
            if ((clickX > (ball.x-ball.radius)) && (clickX < (ball.x + ball.radius))) {
                if ((clickY > (ball.y-ball.radius)) && (clickY < (ball.y+ball.radius))) {
                    ball.dx -= 2;
                    ball.dy -= 3;
                    return;
                }
            }
        }
    }
  </script>
</head>

<body>
  <canvas id="canvas" width="400" height="300"></canvas>

  <div>
    <button onclick="addBall()">Add Ball</button>
    <button onclick="clearBalls()">Clear Canvas</button>
  </div>
  <div>
    Ball Size: <input type="number" id="ballSize" min="0" max="50" value="15">
    <input type="checkbox" id="connectedBalls">Connect Balls<br>
  </div>
</body>
</html>
